/* 채팅 영역 내 스크롤 */
html, body {
	height:100%; /*높이를 100%로 잡아줘야 하위 엘리먼트에서 가변폭 수직 스크롤 생성 가능*/
}
body {
	overflow: hidden; /*채팅 영역 외에 불필요한 스크롤 안 나타나게*/
}

#chat.ui-page-active, #chat .ui-panel-content-wrap { /* 높이 상속을 위한 처리 */
	height: 100%;
}

.chat-list-box {
	height:100%; /* 전체 페이지의 높이를 상속받고 */
	box-sizing:border-box; /* 박스 모델을 변경해서  */
	padding: 0 0 100px 0; /* padding으로 원하는 내부 높이를 얻어낼 수 있도록 만듬 */
	background-color: rgb(242, 242, 242);
}


.chat-list {
	height: 100%; /* padding으로 제약받은 영역 내의 높이 전체를 사용 */
	overflow-x: hidden; /* 세로 스크롤만 */
	overflow-y: auto;
	margin: 0;
	padding: 0;
}

.chat-list li {
	position: relative; /* 풍선 말꼬리를 위해서 offset parent가 되어야 함 */
	margin: 5px 0 5px 0;
}

/* 채팅 말풍선 */
/*		타인의 말 */
.chat-list .nickname {
	font-size: 0.7em; /*닉네임은 조금 작게. 상대 수치로 표기 */
	font-weight: bold;
	display: block; /* 다음 span과 개행하기 위해 block으로 지정 */
	padding-left: 10px;
}

.chat-list li .message {
	display: inline-block; /* 글자 수에 알맞은 크기, 여러 줄을 함께 감싸기 - 를 모두 지원하려면 inline-block으로 해야 */
	line-height: 150%;
	padding: 5px;
	margin:0;
	border-radius: 8px;
}

.chat-list li.image .message { /* 이미지인 경우 줄간격 줄이고 테두리 더 두껍게 */
	line-height: 100%;
	padding: 7px;
}

.chat-list li span.message:after { /* CSS 만으로 풍선 말꼬리 만들기 */
	content: '';
	position: absolute;
	top: 29px;
	width: 0;
	height: 0;
}

/*		타인의 말 */
.chat-list li.others .message {
	margin: 0 100px 0 10px;
	background-color: rgb(241, 196, 15);
}

.chat-list li.others .message:after {
	left: 0;
	border-right:12px solid rgb(241, 196, 15);
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
}

/*		내 말 */
.chat-list li.mine {
	text-align: right;
	margin:10px 0 10px 0;
}

.chat-list li.mine .message {
	margin: 0 10px 0 100px;
	background-color: rgb(46, 204, 113);
}

.chat-list li.mine .message:after {
	right: 0;
	top: 10px;
	border-left:12px solid rgb(46, 204, 113);
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
}

/* 메시지 입력 바 */
.input-container { 
	position: relative; 
	padding-left: 6px;
	padding-right: 125px;
}
.input-container div.ui-input-text { 
	float: left; 
	width: 100%; 
	margin-right:-125px;
}

.input-container .send-btn-wrap {
	float: right; 
	position: relative;
	/*left:83px; */
	right:-114px;
	/*width:60px;*/
	height: 35px;
	padding-top: 7px;
}
.input-container .send-btn-wrap > div {
	margin:0;
	padding: 3px 0 3px 0;
}
.input-container .send-btn-wrap .ui-btn-text {
	font-size: 16px;
	/*font-weight: normal;*/
	/*font-family: 나눔고딕;*/
}
.input-container:after { 
	display: block;
	clear: both;
	content: ''
}


/* 닉네임 입력 폼 */
.nickname-form {
	position: relative; 
	padding-left: 6px;
	padding-right: 120px;
}

.nickname-form div.ui-input-text { 
	float: left; 
	width: 100%; 
	margin-right:-110px;
}

.nickname-form .ui-btn {
	float: right; 
	position: relative;
	left:113px; width:90px;
	height: 35px;
	padding: 0 0 2px 0;
}

.nickname-form:after { 
	display: block;
	clear: both;
	content: ''
}


/* 패널 그림자 */

.ui-panel-display-reveal { 
	box-shadow: none;
}

.ui-page-panel-open .ui-panel-display-reveal ~ div {
	box-shadow: -5px 0 5px rgba(0, 0, 0, 0.15);
}

/* 패널 열기 버튼 */
.input-container a.attachment-btn {
	float:left;
	border-radius: 6px;
	padding: 6px 2px 7px 2px;
	margin-right: 3px;
}

/* 지도 뷰 */
#map-view {
	height: 100%;
}
#map-view .map-view-content {
	height: 100%;
	box-sizing: border-box;
	padding: 0 0 44px 0;
}
#map-view .map-view-content .map-canvas {
	height: 100%;
}

/* 이미지 뷰 */
#image-view {
	height: 100%;
}

#image-view .image-view-content {
	height: 100%;
	box-sizing: border-box;
	padding: 0 0 44px 0;
	overflow: hidden;
	text-align: center;
}

#image-view .image-wrap.wide {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
/*
#image-view .image-wrap img {
	width: 100%;
	height: auto;
}*/

#image-view img {
	width:100%;
	max-height: 100%;
}

/*#image-view img.tall {
	height: 100%;
	width: auto;
	max-height: 100%;
}
#image-view img.wide {
	height: auto;
	width: 100%;
}*/